<?php if (!defined('THINK_PATH')) exit();?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing: border-box}

        body{width: 800px;margin: auto}
        .imgs-div{margin: 10px 0;padding: 5px}
        .img-div{
            float: left;
            width: 190px;
            margin: 5px;
            height: 200px;
            border: 1px solid gray;text-align: center;
        }
        .img-div>img{display: block;margin:5px auto 5px;height: 160px;width: 180px}
    </style>
</head>
<body>
<form>
    <input type="file" name="img">
    <button id="uploadbutton" type="button">上传</button>
</form>
<div class="imgs-div"></div>

<script src="/Public/js/jquery-1.11.1.min.js"></script>
<script>
    var form=$('form');
    var imgsDiv=$('.imgs-div');

    function showImages(imgNames){
        for(var i=0;i<imgNames.length;i++){
            addImage(imgNames[i]);
        }
    }

    function addImage(imgName){
        var imgDiv=$('<div>',{'class':'img-div'});
        imgDiv.append($('<img>',{src:'/Ul/'+imgName}));
        imgDiv.append($('<button>',{html:'删除'}).click(deleteImg));
        imgDiv.appendTo(imgsDiv);
    }

    function deleteImg(){
        var me=$(this);
        var parent = me.parent('.img-div');
        var img = parent.children('img').attr('src');
        $.post('<?php echo U("T1/delete");?>',{img:img},function(resp){
            if(resp.status){
                parent.remove();
            }else {
                alert(resp.message)
            }
        },'json')
    }

        $.get('<?php echo U("T1/shuaxin");?>',function(resp){
            showImages(resp)
            });

    $('#uploadbutton').click(function(){
        var formData = new FormData(form.get(0));

        $.ajax({
            url:'<?php echo U("T1/up");?>',
            type:'post',
            dataType:'json',
            data:formData,
            processData:false,
            contentType:false,
            success:function(resp){
                if(resp.status){
                    addImage(resp.img);
                }else {
                    alert(resp.message)
                }
            }
        })
    })
</script>
</body>
</html>